<script setup lang="ts">
import payCode from "~/assets/images/微信收款码.jpg";
import wechatCode from "~/assets/images/微信二维码.jpg";
</script>

<template>
  <el-row justify="space-between">
    <el-card class="flex-1">
      <template #header>
        <div class="card-header font-bold">
          <span>欢迎光临！</span>
        </div>
      </template>
      <div class="flex justify-between pr-10">
        <div>
          <p>我是一套通用信息管理系统，适用于各种信息管理场景：</p>
          <ul>
            <li>企业内部信息管理</li>
            <li>政府部门信息管理</li>
            <li>学校信息管理</li>
            <li>……</li>
          </ul>
          <p>更新日志：</p>
          <ul>
            <li>2025年7月26日 1.0.0 版本发布</li>
            <li>2025年8月1日 &nbsp;&nbsp;……</li>
          </ul>
          <p>欢迎私信我加入EC尽享编程俱乐部共同学习，交流成长！</p>
        </div>

        <el-image
          style="width: 180px"
          :src="wechatCode"
          fit="cover"
          :preview-src-list="[wechatCode]"
        />
      </div>
      <template #footer>
        <span class="font-bold"
          >技术栈：Nuxt3 （全栈服务端渲染） + TS + Element Plus</span
        ></template
      >
    </el-card>

    <el-card class="ml-4">
      <template #header>
        <div class="card-header font-bold">
          <span>捐赠支持</span>
        </div>
      </template>

      <el-image
        style="width: 200px"
        :src="payCode"
        fit="cover"
        :preview-src-list="[payCode]"
      />

      <template #footer>请作者喝杯奶茶鼓励下吧！</template>
    </el-card>
  </el-row>
</template>

<style scoped>
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px; /* 左侧内边距，用于容纳项目符号 */
}
</style>
